<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<style>
			.mui-content{
				line-height: 1.5em;
			}
			.amount {
				vertical-align: middle;
			}
			.tabs{
				margin-bottom: 10px;
				padding: 10px 20px;
				background: #fff;
			}
			.mui-segmented-control .mui-control-item{
				line-height: 2.2em;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" id="pullrefresh">
			<div class="tabs">
				<input type="hidden" id="priceType" />
				<div id="priceTypeTabs" class="mui-segmented-control mui-segmented-control-black">
					<a class="mui-control-item mui-active" data-value="全部" data-id="All">
						全部
					</a>
					<a class="mui-control-item" data-value="还款" data-id="Repay" >
						还款
					</a>
					<a class="mui-control-item" data-value="取现" data-id="Withdraw">
						取现
					</a>
					<a class="mui-control-item" data-value="充值" data-id="Recharge">
						充值
					</a>
					<a class="mui-control-item" data-value="分润" data-id="Dividend">
						分润
					</a>
				</div>
			</div>
			<ul id="list" class="mui-table-view mui-table-view-striped mui-table-view-condensed">
		        
		   </ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/parseTemplate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/resources.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/html" id="tplList">
			<# var item;for(var i=0 ; i < data.length; i++) { item=data[i];
				if (i==0) firstID.notice = item.BillID;
					if (i==data.length-1) lastID.notice = item.BillID;
				#>
			<li class="mui-table-view-cell" data-id="<#= item.BillID #>">
		            <div class="mui-table">
		                <div class="mui-table-cell mui-col-xs-8">
		                	<div><#= item.MoneyType #></div>
		                    <div class="mui-h5"><#= item.CreateTime #></div>
		                </div>
		                <div class="mui-table-cell mui-col-xs-4 mui-text-right amount">
		                    <h4><#= (item.Amount > 0 ? "" : "") + app.fmoney(item.Amount) #></h4>
		                </div>
		            </div>
		        </li>
		    <#}#>
		</script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {										
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
					
					initData(true, false);
					console.log("下拉刷新");
				}, 1500);
			};
			
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
										
					initData(false, true);
					console.log("上拉加载");
				}, 1500);
			};
			
			var tpl = document.getElementById("tplList").innerHTML;
			var $list = document.getElementById("list"); 
			var lastID = {message:null, notice:null};
			var firstID= {message:null, notice:null};
			var dataList;
			
			mui("#list").on('tap', 'li', function(){	
				var id = this.getAttribute("data-id");
				mui.openWindow({url:"bill-item.html", id:"bill-item", extras:{ data: getItemData(id) }});
			});
			
			mui("#priceTypeTabs").on('tap','a',function(){
				var MoneyType = this.getAttribute("data-id");
				//console.log(MoneyType);
				mui.showLoading();
				app.post("GetBillList", {MoneyType:MoneyType}, function(data){
					$list.innerHTML = parseTemplate(tpl, data);
					dataList = data;
				});
			});
			
			getItemData = function(id){
				console.log(JSON.stringify(dataList));
				var f = dataList.data.filter(function(item) {
					return item.BillID == id;
				});
				return f.length > 0 ? f[0] : null;
			};
			
			initData = function(isPush, isPull){
				console.log("init bill");
				var data = {};
				
				if(isPush) data.LastID = lastID;
				if(isPull) data.FirstID = firstID;
				
				mui.showLoading();
				app.post("GetBillList", {MoneyType:'All'}, function(data){
					$list.innerHTML = parseTemplate(tpl, data);
					dataList = data;
				});
			};
			
			mui.plusReady(function(){
				initData();
			});
		</script>
	</body>

</html>